// components/booking/index.js
const {
    dateData,
    timeData,
    timeStamp
} = require('./date.js');

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        //开始时间选项
        startTime: {
            type: String,
            default: '08:00'
        },
        //结束时间选项
        endTime: {
            type: String,
            default: '18:00'
        },
        // 提前预约的时间
        advanceTime: {
            type: Number,
            default: 0
        },
        // 默认选择的时间段间隔
        timeSlot: {
            type: Number,
            default: 2
        },
        //时间间隔
        timeInterval: {
            type: [Number, String],
            default: 0.5 //半小时
        },
        //选中的tab颜色
        selectedTabColor: {
            type: String,
            default: '#0092D5'
        },
        //选中的时间颜色
        selectedItemColor: {
            type: String,
            default: '#0094D7'
        },

        //禁用显示的文本
        disableText: {
            type: String,
            default: '约满'
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        dateArr: [], //日期数据
        timeArr: [], //时间数据
        dateActive: 0, //选中的日期索引
        timeActive: [], //选中的时间索引
        oldTimeActive: [], //保存用户筛选的时间
        selectDate: '', //选择的日期数据
        selectTime: [], //选择的时间
        oldSelectTime: '',
        currentTimeStamp: '',
        currentTime: '',
        tabs: 0
    },

    lifetimes: {
        // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
        attached: function () {
            //获取日期tab数据
            let dateArr = dateData();
            //获取时间数据
            let timeArr = timeData(this.data.startTime, this.data.endTime, this.data.timeInterval);
            let maxIndex = timeArr[timeArr.length - 1]['index'];
            //当前时间戳
            let currentTimeStamp = Date.now() + this.data.advanceTime * 3600 * 1000;
            let currentTime = timeStamp(this.data.currentTimeStamp).hour;
            timeArr.map(item => {
                if (item.time > currentTime) {
                    return (item.disable = 0); //判断当前时间大于时间选项则禁用
                } else {
                    return (item.disable = 1);
                }
            });
            //默认选中的日期
            let selectDate = `${dateArr[0]['date']}(${dateArr[0]['week']})`;
            timeArr.some((item, index) => {
                // 默认选中的时间段
                const endIndex = this.data.timeSlot / this.data.timeInterval + index > maxIndex ? maxIndex : this.data.timeSlot / this.data.timeInterval + index;
                // this.setData({
                //     selectTime: [timeArr[index]['time'], timeArr[endIndex]['time']],
                //     oldSelectTime: [timeArr[index]['time'], timeArr[endIndex]['time']],
                //     timeActive: [index, endIndex],
                //     oldTimeActive: [index, endIndex]
                // })
                return !item.disable;
            });
            this.setData({
                currentTimeStamp: currentTimeStamp,
                currentTime: currentTime,
                selectDate: selectDate
            })
        },
        moved: function () {},
        detached: function () {},
    },

    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () {}, // 此处attached的声明会被lifetimes字段中的声明覆盖
    ready: function () {},

    /**
     * 组件的方法列表
     */
    methods: {
        selectDateEvent(index, item) {
            this.data.tabs = 0;
            if (this.data.currentTimeStamp < item.timeStamp) {
                const endIndex = this.data.timeSlot / this.data.timeInterval;
                this.data.timeActive = [0, endIndex];
                this.data.selectTime = [this.data.timeArr[0]['time'], this.data.timeArr[endIndex]['time']];
                this.data.timeArr.map(item => {
                    return (item.disable = 0);
                });
            } else {
                this.data.timeActive = this.data.oldTimeActive;
                this.data.selectTime = this.data.oldSelectTime;
                this.data.timeArr.map(item => {
                    if (item.time > this.data.currentTime) {
                        return (item.disable = 0);
                    } else {
                        return (item.disable = 1);
                    }
                });
            }
            this.data.dateActive = index;
            this.data.selectDate = `${this.data.dateArr[index]['date']}(${this.data.dateArr[index]['week']})`;
            this.$emit('selectTime', `${this.data.selectDate}${this.data.selectTime.join('-')}`);
        },
        selectTimeEvent(index, item) {
            if (item.disable || this.data.timeActive.indexOf(index) > -1) return;
            this.data.tabs++;
            if (this.data.tabs % 2 == 0) {
                this.$set(this.data.timeActive, 1, index);
                this.data.selectTime[1] = this.data.timeArr[index]['time'];
            } else {
                this.$set(this.data.timeActive, 0, index);
                this.data.selectTime[0] = this.data.timeArr[index]['time'];
            }
            // 判断用户选择的时间是否大于第一次选择的时间
            if (this.data.timeActive[0] > this.data.timeActive[1]) {
                const tempTime = this.data.selectTime[0];
                const tempIndex = this.data.timeActive[0];
                this.data.selectTime[0] = this.data.selectTime[1];
                this.data.selectTime[1] = tempTime;
                this.$set(this.data.timeActive, 0, this.data.timeActive[1]);
                this.$set(this.data.timeActive, 1, tempIndex);
            }
            // this.timeActive = index
            // this.selectTime = this.timeArr[index]['time']
            this.$emit('selectTime', `${this.data.selectDate}${this.data.selectTime.join('-')}`);
        },
    }
})